<template>
  <a-tree-select allowClear style="width: 100%" :replaceFields="{title:'name', key:'id', value: 'id' }" :disabled="disabled"
    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :placeholder="placeholder" :value="treeValue" :multiple="multiple" :treeData="treeData"
    @change="onChange" @search="onSearch" tree-default-expand-all :treeCheckable="treeCheckable">
  </a-tree-select>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'TipCateTree',
  data () {
    return {
      treeData: [],
      treeValue: null,
      url_root: "/mallBase/gmsCategory/trees",
      url_view: '/mallBase/gmsCategory/queryById',
      shop_url_root: "/mallBase/smsCategory/trees",
      shop_url_view: '/mallBase/smsCategory/queryById',
      service_url_root: "/mallBase/smsServiceCategory/trees",
      service_url_view: '/mallBase/smsServiceCategory/queryById',
    }
  },
  props: {
    value: {
      type: String,
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    multiple: {
      type: Boolean,
      default: false,
      required: false
    },
    treeCheckable: {
      type: Boolean,
      default: true,
      required: false
    },
    field: {
      type: String,
      default: 'id',
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    type: {//'platform'：平台商品分类,'shop':店铺商品分类,'service':服务类目
      type: String,
      default: 'platform',
      required: false
    },
    back: {
      type: String,
      default: '',
      required: false
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        this.loadViewInfo()
      }
    }
  },
  created () {
    this.loadRoot()
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    loadViewInfo () {
      if (!this.value) {
        this.treeValue = null
      } else {
        this.treeValue = this.value.split(',')
      }
    },
    loadRoot () {
      let param = {}
      let url = ""
      if (this.type == "platform") {
        url = this.url_root
      } else if (this.type == "shop") {
        url = this.shop_url_root
      } else if (this.type == "service") {
        url = this.service_url_root
      } else {
        url = this.url_root
      }
      getAction(url, param).then(res => {
        if (res.success) {
          this.handleTreeNodeValue(res.result.records)
          this.treeData = [...res.result.records]
          // this.loadViewInfo()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    handleTreeNodeValue (result) {
      let storeField = this.field == 'code' ? 'code' : 'key'
      for (let i of result) {
        i.value = i[storeField]
        i.isLeaf = (!i.leaf) ? false : true
        if (i.children && i.children.length > 0) {
          this.handleTreeNodeValue(i.children)
        }
      }
    },
    onChange (value) {
      if (!value) {
        this.$emit('change', '')
        this.$emit('input', '')
        this.treeValue = ''
      } else if (Array.isArray(value)) {
        this.$emit('change', value.join(','))
        this.$emit('input', value.join(','))
        this.treeValue = value
      } else {
        this.$emit('change', value)
        this.$emit('input', value)
        this.treeValue = value
      }
    },
    backValue (value, label) {
      let obj = {}
      if (this.back) {
        obj[this.back] = label
      }
      this.$emit('change', value, obj)
    },
    onSearch (value) {
      console.log(value)
    },
    getCurrTreeData () {
      return this.treeData
    }
  }

}
</script>